<template>
  <div class="child-conten">
    <p>{{msg}}</p>
    <!-- <p>我是父组件传递过来的值：{{numberToDo}}</p>
    <p>我是父组件传递过来的值：{{string}}</p> -->
    <button @click='emitMyEvent'>child-emit</button><br>
    <slot name='header'>no header</slot>
    <p>子组件内容</p>
    <slot name='footer'>no header</slot>
  </div>
</template>
<script>
export default {
  // props属性内容的简写：
  // props:['number'],
  props: ['number-to-do','string'],
  // Prop 验证
  // props: {
  //   'number-to-do': {
  //     type: Number,
  //     default: 100
  //   }
  // },
  data() {
    return {
      msg: 'I am a components'
    }
  },
  // 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等
  // 到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：
  mounted: function() {
    this.$nextTick(function() {
      // console.log('this.numberToDo：' + this.numberToDo);
    })
  },
  methods: {
    emitMyEvent() {
      this.$emit('my-event', this.msg);
    }
  }
}

</script>
